<template>
	<view class="content">
		<view class="input-box">
			<view class="head-tit">用户注册</view>
			<view class="input1-box">
				<input class="inp-name" v-model="inpMobile" maxlength="11" placeholder="请输入手机号" placeholder-style="color: #999;"/>
				<text v-if="inpMobile == ''"></text>
				<uni-icons v-else class="icons1" @click="emptyInp('mob')" type="closeempty" size="18" color="#f18b49"></uni-icons>
			</view>
			<view class="input1-box">
				<input class="inp-name" v-model="inpName" maxlength="12" placeholder="请输入用户名" placeholder-style="color: #999;"/>
				<text v-if="inpName == ''"></text>
				<uni-icons v-else class="icons1" @click="emptyInp('name')" type="closeempty" size="18" color="#f18b49"></uni-icons>
			</view>
			<view class="input2-box">
				<input class="inp-pwd" v-model="inpPwd" maxlength="16" type="password" placeholder="请输入密码" placeholder-class="inp-pwd-place"/>
				<text v-if="inpPwd == ''"></text>
				<uni-icons v-else class="icons2" @click="emptyInp('pwd')" type="closeempty" size="18" color="#f18b49"></uni-icons>
			</view>
			<view class="input2-box">
				<input class="inp-pwd" v-model="inpPwd2" maxlength="16" type="password" placeholder="再次输入密码" placeholder-class="inp-pwd-place"/>
				<text v-if="inpPwd2 == ''"></text>
				<uni-icons v-else class="icons2" @click="emptyInp('pwd2')" type="closeempty" size="18" color="#f18b49"></uni-icons>
			</view>
			<view class="login-btn" @click="register()">确认注册</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inpPwd: '',
				inpPwd2: '',
				inpName: '',
				inpMobile: '',
			}
		},
		onLoad() {
			
		},
		onShow(){
			
		},
		methods: {
			uniShowToast(tit){
				uni.showToast({
					title: tit,
					duration: 1500,
					icon: 'none'
				})
			},
			// 注册
			register(){
				let mobReg = /^[1][3,4,5,7,8,9][0-9]{9}$/
				if(this.inpMobile == '' && this.inpName == '' && this.inpPwd == '' && this.inpPwd2 == ''){
					let tit = '请完整填写注册信息'
					this.uniShowToast(tit)
				} else if(mobReg.test(this.inpMobile)){
					if(this.inpName == '' && this.inpPwd == '' && this.inpPwd2 == ''){
						let tit = '用户名和密码不能为空'
						this.uniShowToast(tit)
					} else if(this.inpName == ''){
						let tit = '用户名不能为空'
						this.uniShowToast(tit)
					} else if(this.inpName.length < 2){
						let tit = '用户名不能小于2位数'
						this.uniShowToast(tit)
					} else if(this.inpPwd == '' && this.inpPwd2 == ''){
						let tit = '密码不能为空'
						this.uniShowToast(tit)
					} else if(this.inpPwd.length < 6  && this.inpPwd2.length < 6){
						let tit = '密码不能小于6位数'
						this.uniShowToast(tit)
					} else if(this.inpPwd.length == 16  && this.inpPwd2.length == 16){
						let tit = '密码不能超过16位数'
						this.uniShowToast(tit)
					} else if(this.inpPwd == ''){
						let tit = '密码不能为空'
						this.uniShowToast(tit)
					} else if(this.inpPwd2 == ''){
						let tit = '请再次输入密码'
						this.uniShowToast(tit)
					} else if(this.inpPwd !== this.inpPwd2){
						let tit = '两次密码输入不一致'
						this.uniShowToast(tit)
					} else {
						this.$http('/gjcApi/member_save', { user_id: '', mobile: this.inpMobile, user_name: this.inpName, password: this.inpPwd }, res => {
							if(res.code == 200){
								uni.showToast({
									title: '注册成功',
									duration: 1000,
									icon: 'none',
									success() {
										setTimeout(() => {
											uni.navigateBack({
												delta: 1
											})
										}, 1000)
									}
								})
							} else if(res.code == 405){
								let tit = '手机号已被注册'
								this.uniShowToast(tit)
							} else if(res.code == 404){
								let tit = '用户名已被注册'
								this.uniShowToast(tit)
							}
						})
					}
				} else {
					let tit = '手机号码不正确'
					this.uniShowToast(tit)
				}
			},
			// 清除input内容
			emptyInp(e){
				if(e == 'mob'){
					this.inpMobile = ""
				} else if(e == 'name'){
					this.inpName = ""
				} else if(e == 'pwd'){
					this.inpPwd = ""
				} else if(e == 'pwd2'){
					this.inpPwd2 = ""
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: $uni-model-color;
	}
	.content{
		padding: 60rpx;
		.input-box{
			.head-tit{
				font-size: 44rpx;
				margin-bottom: 30rpx;
				letter-spacing: 4rpx;
				color: $uni-text-color;
			}
			input{
				padding: 20rpx 0;
				border-bottom: 2rpx solid $uni-text-color;
			}
			.input1-box{
				position: relative;
				.inp-name{
					margin-bottom: 5rpx;
					padding-left: 4rpx;
					letter-spacing: 2rpx;
				}
				.icons1{
					position: absolute;
					bottom: 20rpx;
					right: 15rpx;
				}
			}
			.input2-box{
				position: relative;
				.inp-pwd{
					letter-spacing: 15rpx;
					padding-left: 4rpx;
				}
				.inp-pwd-place{
					color: #999;
					letter-spacing: 2rpx;
				}
				.icons2{
					position: absolute;
					bottom: 20rpx;
					right: 15rpx;
				}
			}
			.login-btn{
				margin-top: 40rpx;
				padding: 20rpx 0;
				text-align: center;
				background: #ff914d;
				border-radius: 10rpx;
				letter-spacing: 20rpx;
				color: $uni-model-color;
			}
		}
	}
</style>